<template>


    <ul class="scroll-container">
        <div class="actual-height-container">
            <div class="tranlate-container">
                <li ref="item" v-for="item in actualRenderData" :key="item">{{ item }}</li>
            </div>
        </div>

    </ul>



</template>



<script setup lang="ts">


import useVirtualList from '@/type/type'
import { ref } from 'vue';

const item = ref(null)
const tableData = ref([...new Array(1000).fill(0).map((_, i) => i + 1)])

const { actualRenderData } = useVirtualList({
    data: tableData,
    itemHeitht: 100,
    size: 30,
    scrollContainer: '.scroll-container',
    actuaHeightContainer: 'actual-height-container',
    tranllateContainer: '.tranlate-container',
})
console.log(actualRenderData.value);




</script>



<style scoped lang="less">
.scroll-container {
    width: 20%;
    height: 90vh;
    overflow: scroll;

    .actual-height-container {
        width: 100%;
        height: 100%;

        .tranlate-container {
            width: 100%;
            height: 100%;

            li {
                width: 100%;
                height: 100px;
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                font-weight: 700;
                color: #000;
            }
        }
    }
}
</style>